<template>
  <div class="boxsty zhiBiao">
    <div :height="searchheight" v-if="showSearch">
      <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">
        {{ searchadvanced ? "收起" : "展开" }}
        <i
          :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        />
      </span>
      <div v-show="searchadvanced" v-if="tianBaoTable.lastPage=='zbnd'">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
          class="form-inline"
          v-if="showSearch"
        >
          <el-form-item label>
            <el-checkbox-group v-model="dataForm.check">
              <el-checkbox
                v-for="item in checkList"
                :key="item.name"
                :label="item.name"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="float: right">
     <!-- <el-button type="primary" plain @click="saveZhibiaoData">批量同意</el-button>-->
      <el-button type="primary" plain @click="fnBackOldPage">关闭</el-button>
    </div>
    <div class="avue-crud">
      <el-table
        ref="zhibiaotable"
        style="width: 100%;margin-top:20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
      >
        <el-table-column
          v-if="tianBaoTable.lastPage=='zbnd'"
          label="选择"
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column type="index" width="60" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column
          v-if="radio =='1'"
          prop="assessRealName"
          header-align="center"
          align="center"
          min-width="100"
          label="被考核对象"
        >
          <template slot="header">
            <span>被考核对象</span>
            <span class="mg-l10">({{dataList.length}})</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="radio =='2'"
          prop="assessDeptName"
          header-align="center"
          align="center"
          min-width="100"
          label="机构名称"
        >
          <template slot="header">
            <span>机构名称</span>
            <span class="mg-l10">({{dataList.length}}个)</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in list"
          :key="index"
          align="center"
          :label="item.name"
        >
          <template slot="header">
            <span>{{ item.name }}</span>
            <span class="mg-l10"></span>
          </template>
          <el-table-column header-align="center" align="center" min-width="120" label="目标值">
            <template slot-scope="scope">
              <span>{{scope.row.itemList[index].targetValue}}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" min-width="100" label="权重">
            <template slot-scope="scope">
              <span >{{scope.row.itemList[index].weight}}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" min-width="100" label="完成值">
            <template slot-scope="scope">
              <span >{{scope.row.itemList[index].finishValue}}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" min-width="100" label="得分">
            <template slot-scope="scope">
              <span>{{scope.row.itemList[index].score}}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" min-width="100" align="center" label="单位">
            <template slot-scope="scope">
              <span >{{scope.row.itemList[index].unit}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// 自己接口
import {
  indexReviewDataList,
  indexReviewTabList,
  newIndexExaminTabList,
  indexReviewDataListNew,
  newIndexExaminTabListNew
} from "@/api/dailyExamine/targetExamine/indicatorFormulation";
import { resultFillSave } from "@/api/dailyExamine/targetExamine/InitiateFilling";
export default {
  props: {
    tianBaoTable: {},
    ids: [],
    lastPage: "",
    hetongzhibiaoTable: {},
    dataListHT: [],
    radio: "",
    taskIds: []
  },
  data() {
    return {
      editFlag: 1,
      pageTitle: "日常考核",
      dataForm: {
        check: []
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      fullscreenLoading: false,
      zhiShow: "1",
      zhibiaoForm: {},
      showSearch: true,
      showBackBtn: true,
      checkList: [],
      idArray: "",
      searchadvanced: true,
      searchheight: "0",
      list: []
    };
  },
  watch: {
    "dataForm.check"(newValue, oldValue) {
      if (newValue.length > 0) {
        this.idArray = "";
        // newValue.forEach(ele => {
        //   this.idArray = this.idArray + ele + ",";
        // });
        this.list = this.checkList.filter(x => {
          return newValue.some(y => {
            return x.name == y;
          });
        });
        newValue.forEach(ele => {
          this.checkList.map(it => {
            if (it.name == ele) {
              this.idArray = this.idArray + it.itemIdList.toString() + ",";
            }
          });
        });
        this.getDataList();
      }
      if (newValue.length == 0) {
        this.list = [];
        this.dataList = [];
        //console.log(oldValue)
      }
    }
  },
  filters: {
    filterNum(dataList, listItem, index) {
      var num = 0;
      var arr = dataList.filter(item => {
        return item["zbId" + (index + 1)];
      });
      num = arr.length;
      return num;
    }
  },
  created() {
    var ids = this.ids;
    var taskIds = this.taskIds;
    this.getZhibiaoCheckndData(ids, taskIds);

    //this.getDataList()
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    saveZhibiaoData() {
      resultFillSave(this.dataList).then(response => {
        this.$message.closeAll();
        this.$message.success("保存成功");
        this.getDataList();
        this.fnBackOldPage();
      });
    },

    getZhibiaoCheckndData(ids, taskIds) {
        indexReviewDataListNew(ids.toString(), taskIds.toString()).then(response => {
        this.checkList = response.data.data;
        if (this.tianBaoTable.lastPage != "zbnd") {
          //上面这种会出现重复的情况，所以用id去取了值（去重）
          var arr = response.data.data;
          this.list = [];
          arr.forEach(item => {
            var obj = this.list.find(listItem => listItem.id == item.id);
            if (!obj) {
              this.list.push(item);
            }
          });

          new Promise((resolve, reject) => {
            response.data.data.forEach(ele => {
              //console.log(ele)
              this.idArray = this.idArray + ele.id + ",";
            });
            resolve(this.getDataList());
          });
        } else {
          this.list = [];
        }
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    init(data) {
      this.lastPage = data.lastPage;
      this.showSearch = data.showSearch;
      this.pageTitle = data.pageTitle;
      this.showBackBtn = data.showBackBtn;
    },
    // 获取数据列表
    getDataList() {
      this.dataList = [] ; //解决table重新布局列渲染错位bug
      this.dataListLoading = true;
        newIndexExaminTabListNew(this.ids.toString(), this.idArray.toString()).then(
        response => {
          this.dataList = response.data.data;
          this.dataListLoading = false;
        }
      );
    },
    // 每页数
    sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
    },
    //子集信息
    zhibiaoChild(zhibiaoChild) {
        if (zhibiaoChild) {
            this.zhiShow = 1;
        }
    },
    //返回原来的页面
    fnBackOldPage() {
      this.$emit("fnBackOldPage", "返回原页面");
    }
  }
};
</script>
